<template>
  <div class="trade-container">
    <div>
      <el-table ref="multipleTable"
                :data="tableData.data"
                tooltip-effect="dark"
                stripe
                highlight-selection-row
                max-height="750"
                style="width: 100%">
        <el-table-column prop="state" label="用户名称" fixed="right"></el-table-column>
        <el-table-column prop="userId" label="用户id" fixed="right"></el-table-column>
        <el-table-column prop="roleId" label="权限id" fixed="right"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-link type="success" style="margin-right: 10px">查看</el-link>
            <el-link type="warning" style="margin-right: 10px" @click="editRole(scope.row.id)">修改</el-link>
            <el-link type="danger">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {_getUserRoleList} from "../../http/api.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const router = useRouter();
const loginId = sessionStorage.getItem('loginId');
const exhibitionId = sessionStorage.getItem('projectId');

if(!loginId||!exhibitionId) {
  ElMessage({message: '操作异常', type: 'error' });
  localStorage.clear();
  sessionStorage.clear();
  router.replace({ path: '/'})
}

const tableData = reactive({ // 表格数据
  data:[]
})

// 获取角色列表
const getRoleList = () => {
  _getUserRoleList()
      .then(res => {
        console.log(res);
        if(res.data.ok) {
          let records = res.data.data;
          tableData.data = records;
        }
      })
      .catch(err => {
        console.log(err);
      })
}
getRoleList()
</script>

<style lang="scss" scoped>
.trade-container{
  padding: 10px;
}
.icon-style{
  font-size: 24px;
  cursor: pointer;
}
.face-img-box{
  width: 50px;
  height: 65px;
}
</style>
